<template>
  <!-- 日统计 -->
  <view class="Dailystatistics">
    <view class="contentupper">
      <!-- 日历组件 -->
      <view>
        <Calendar></Calendar>
      </view>

      <!-- 考勤信息容器 -->
      <view class="attendance-container">
        <!-- 考勤头部信息 -->
        <view class="attendance-header">
          <text class="shift-info">当日班次：固定上下班 办公室 08:30-17:30</text>
          <text class="stats-info">出勤统计：打卡2次，工时10.4小时</text>
        </view>

        <!-- 考勤详情步骤条 -->
        <view class="attendance-details">
          <up-steps direction="column" dot>
            <up-steps-item title="上班 08:15" desc="绿港现代农业发展股份有限公司" icon="map">
              <template #desc>

                <view class="step-desc">
                  <view style="display: flex;margin-bottom: 5px;margin-top: 5px;">
                    <up-icon name="map" size="14"></up-icon>
                    绿港现代农业发展股份有限公司
                  </view>

                  <view class="verification">
                    <u-icon name="checkmark-circle" size="14"></u-icon>
                    <text>人脸验证已通过</text>
                  </view>
                </view>
              </template>
            </up-steps-item>

            <up-steps-item title="下班 18:37" desc="绿港现代农业发展股份有限公司" icon="map">
              <template #desc>
                <view class="step-desc">
                  <view style="display: flex;margin-bottom: 5px;margin-top: 5px;">
                    <up-icon name="map" size="14"></up-icon>
                    绿港现代农业发展股份有限公司
                  </view>

                  <view class="verification">
                    <u-icon name="checkmark-circle" size="14"></u-icon>
                    <text>人脸验证已通过</text>
                  </view>
                </view>
              </template>
            </up-steps-item>
          </up-steps>
        </view>

        <!-- 统计底部信息 -->
        <view class="attendancerate-footer">
          统计截至 2025-05-13 14:01
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Calendar from './calendar.vue';
export default {
  name: "Dailystatistics",
  components: { Calendar },
  data () {
    return {}
  },
  created () {
    // console.log('个人日统计');
  },
}
</script>

<style lang="scss" scoped>
/* 主容器样式 */
.Dailystatistics {
  width: 100%;
  height: 100%;
  margin: 10px 0 0 0;
  padding: 0;

  .contentupper {
    position: relative;
    height: 100%;
  }
}

/* 考勤信息容器样式 */
.attendance-container {
  background-color: #fff;
  border-radius: 8px;
  margin: 10px;

  /* 考勤头部样式 */
  .attendance-header {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    padding: 10px 10px 0;

    .shift-info {
      font-size: 14px;
      color: #333;
      margin-bottom: 5px;
    }

    .stats-info {
      font-size: 14px;
      color: #666;
    }
  }

  /* 考勤详情样式 */
  .attendance-details {
    margin: 15px 0;
    padding: 0 10px;

    /* 步骤描述样式 */
    .step-desc {
      font-size: 13px;
      color: #606266;
      display: flex;
      flex-direction: column;

      /* 验证信息样式 */
      .verification {
        display: flex;
        align-items: center;
        margin-top: 3px;

        text {
          font-size: 12px;
          color: #07c160;
          margin-left: 5px;
        }
      }
    }
  }

  /* 底部统计信息样式 */
  .attendancerate-footer {
    text-align: left;
    font-size: 12px;
    color: #909193;
    height: 18px;
    margin-top: 10px;
    margin-left: 10px;
    padding-bottom: 10px;
  }
}
</style>